<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader"
window._AMapSecurityConfig = {
  securityJsCode: "a4a41fb896fe6569d5d14689cfe5bf23",
}
export default {
  props: {
    position: {
      type: String,
    },
  },
  computed: {
    pst() {
      return "合肥市" + this.position
    },
  },
  name: "Mapview",
  methods: {
    initMap() {
      AMapLoader.load({
        key: "8af9216df651956774e5628783b0ac66", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          var geocoder = new AMap.Geocoder({
            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            city: "合肥",
          })
          this.map = new AMap.Map("container")
          //   this.map = new AMap.Map("container", {
          //     //设置地图容器id
          //     viewMode: "3D", //是否为3D地图模式
          //     zoom: 15, //初始化地图级别
          //     center: [117.283042, 31.86119], //初始化地图中心点位置
          //   })
          //   console.log(this.position)
          geocoder.getLocation(this.position, (status, result) => {
            if (status === "complete" && result.info === "OK") {
              let lng = result.geocodes[0].location.lng
              let lat = result.geocodes[0].location.lat
              this.map.setCenter([lng, lat])
              var marker = new AMap.Marker({
                position: new AMap.LngLat(lng, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              })
              this.map.add(marker)
              this.map.setZoom(15)
            }
          })
        })
        .catch((e) => {
          console.log(e)
        })
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap()
  },
}
</script>

<style lang="scss" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 400px;
}
</style>
